import { createElement, ReactElement } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import SubProcessModal from '../modalElements/SubProcessModal';
import Strategy from '../modalElements/Strategy';
import MessageTemplate from '../modalElements/MessageTemplate';
import MessageTemp from '../modalElements/MessageTemp';

function mountModalToBody(node: ReactElement) {
    const wrapper = document.createElement('div', {});
    document.body.appendChild(wrapper);
    render(node, wrapper);
    return {
        unmount() {
            try {
                unmountComponentAtNode(wrapper);
                wrapper?.remove?.();
            } catch (e) { }
        },
    };
};

export const subProcess = (
    params?: any
) => {
    const { unmount } = mountModalToBody(
        createElement(SubProcessModal, {
            ...params,
            modalParams: {
                visible: true,
                width: 800,
                footer: null,
                onCancel: () => {
                    unmount();
                },
                wrapClassName: 'process-designer-sub-process-wapper',
                style: {
                    height: 500,
                },
            },
        }),
    );
};

export const doStrategy = (
    params?: any
) => {
    const { unmount } = mountModalToBody(
        createElement(Strategy, {
            ...params,
            modalParams: {
                visible: true,
                width: 600,
                footer: null,
                onCancel: () => {
                    unmount();
                },
                wrapClassName: 'process-designer-strategy-wapper',
            },
        }),
    );
};

export const setMessageTemplate = (
    params?: any
) => {
    const { unmount } = mountModalToBody(
        createElement(MessageTemplate, {
            ...params,
            modalParams: {
                visible: true,
                width: 500,
                footer: null,
                onCancel: () => {
                    unmount();
                },
                wrapClassName: 'process-designer-message-template-wapper',
            },
        }),
    );
};


export const setMessageTemp = (
    params?: any
) => {
    const { unmount } = mountModalToBody(
        createElement(MessageTemp, {
            ...params,
            modalParams: {
                visible: true,
                width: 800,
                footer: null,
                onCancel: () => {
                    unmount();
                },
                wrapClassName: 'process-designer-message-temp-wapper',
            },
        }),
    );
};